<template>
  <view class="content">
    <view class="navigationBox">
      <image class="returnImg" src="../../static/img/return.png" mode="" @tap="go('../coach/index')"></image>
      <view class="title">
        排课管理
      </view>
      <image class="addImg" src="../../static/img/add.png" mode="" @tap="go('../coach/addLineUp')"></image>
      <image class="searchImg" src="../../static/img/search.png" mode="" @tap="searchShow()">
      </image>
    </view>
    <view class="searchBox" v-if="searchShowStatus == true">
      <u-calendar :show="show" mode="range" @confirm="confirm" @close="show = false" :allowSameDay="true"
        :minDate="minDate" :closeOnClickOverlay="true" monthNum="13"></u-calendar>
      <view class="timeBox" @click="show = true">
        <span style="margin-right: 10rpx;">日期</span>
        <view class="time">
          <image src="../../static/img/time.png" mode=""></image>
          {{info.start_date}}
        </view>
        <view style="margin: 0 10rpx;">
          至
        </view>
        <view class="time">
          <image src="../../static/img/time.png" mode=""></image>
          {{info.end_date}}
        </view>
      </view>
      <view class="pickerBox">
        <view class="iptBox pickerItem">
          <input class="ipt" type="text" placeholder="输入学校" placeholder-class="iptPla" v-model="info.school_data">
          <input class="ipt" type="text" placeholder="输入教师" placeholder-class="iptPla" v-model="info.teacher_data">
          <view class="searchBtn" @tap="getData()">
            搜索
          </view>
        </view>
      </view>
    </view>
    <view class="list">
      <view class="list-box" v-for="(item,index) in list">
        <view class="time">
          日期：<text style="color: #666666;">{{item.day_time}}[{{item.week}}]</text>
        </view>
        <view class="list-box-content">
          <view class="item" v-for="(i,k) in item.plan_data" :key="k">
            <view class="itemTime">
              {{i.start_time}}-{{i.end_time}}
            </view>
            <view class="grey">
              {{i.teacher.teacher_nickname}}(教练)
            </view>
            <view class="grey">
              {{i.school.school_name}}
            </view>
            <view class="grey" v-for="(i1,k1) in i.teacher_plan_detail" :key="k1">
              {{i1.user.username}}
            </view>

            <view class="btn-box flex">
              <view class="update-btn" @tap="goEditCoach(i.plan_sn)">编辑</view>
              <view class="delete-btn" @tap="deleteCoach(i.plan_sn)">删除</view>
            </view>
          </view>

        </view>
        <view class="btmBox">
          【{{item.teacher_count}}个老师，{{item.user_count}}个学生，{{item.hour_count}}个小时】
        </view>
      </view>
    </view>

    <!-- 删除弹框 -->
    <u-modal :show="deleteShow" @confirm="deleteConfirm" ref="uModal" :asyncClose="true" :showCancelButton="true"
      @cancel="deleteCancel">
      <view style="width: 100%;text-align: center;">
        确认删除该排课信息吗？
      </view>
    </u-modal>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        info: {
          school_data: '',
          start_date: '',
          end_date: '',
          teacher_data: ''
        },
        maxDate: '',
        minDate: '',
        list: [],
        searchShowStatus: false,
        pageSize: 10,
        pageTotal: 0,
        hasMore: true,
        passwordShow: false,
        new_password: '',
        confirm_new_password: '',
        password_user_id: 0,
        teacher_id: '',
        deleteShow: false
      };
    },
    onLoad() {
      this.chooseTimed()
      this.getDate()
      this.getData()
    },

    methods: {
      // 设置默认日期，最大值为今天，最小值为去年今天
      chooseTimed() {
        let date = new Date();
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        if (month <= 9) {
          month = '0' + month;
        }
        if (day <= 9) {
          day = '0' + day;
        }
        let minyear = year - 1;
        this.minDate = minyear + '-' + month + '-' + day;
        this.maxDate = year + '-' + month + '-' + day;
      },
      getDate() {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
        const day = currentDate.getDate().toString().padStart(2, '0');
        const formattedDate = `${year}-${month}-${day}`;
        this.info.start_date = formattedDate
        this.info.end_date = formattedDate
      },
      async change(id) {
        const {
          data: res
        } = await uni.$http.post('school/teacher/saveTeacherState', {
          teacher_id: id
        })
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.toast.msg('修改成功')
      },
      searchShow() {
        if (this.searchShowStatus == false) {
          this.searchShowStatus = true;
        } else {
          this.searchShowStatus = false;
        }
      },
      confirm(e) {
        this.info.start_date = e[0].replace(/-/g, "/");
        this.info.end_date = e[e.length - 1].replace(/-/g, "/");
        this.show = false
      },
      confirmHour(e) {
        this.hourText = e.value[0].label
        this.info.type = e.value[0].id
        this.hourShow = false
      },
      async getData() {
        const {
          data: res
        } = await uni.$http.post('school/teacher/getPlanList', this.info)
        if (res.code != 1) {
          return this.toast.msg(res.msg)
        }
        this.list = res.data
      },
      deleteCoach(plan_sn) {
        this.delete_plan_sn = plan_sn
        this.deleteShow = true
      },
      async deleteConfirm() {
        const {
          data: res
        } = await uni.$http.post('school/teacher/delPlan', {
          plan_sn: this.delete_plan_sn
        })
        if (res.code != 1) {
          this.deleteCancel()
          return this.toast.msg(res.msg)
        }
        this.toast.msg('删除成功')
        this.list = []
        this.getData();
        this.deleteCancel()
      },
      deleteCancel() {
        this.deleteShow = false
        this.delete_user_id = ''
      },

      goEditCoach(plan_sn) {
        uni.navigateTo({
          url: `/pages/coach/editLineUp?plan_sn=${plan_sn}`
        })
      },
    }
  }
</script>

<style lang="scss">
  .content {
    .navigationBox {
      display: flex;
      align-items: center;
      height: 112rpx;
      padding: 50rpx 30rpx 0 51rpx;

      .returnImg {
        width: 52rpx;
        height: 52rpx;
      }

      .title {
        flex: 1;
        text-align: center;
      }

      .addImg {
        width: 23rpx;
        height: 23rpx;
      }

      .searchImg {
        width: 30rpx;
        height: 30rpx;
        margin-left: 30rpx;
      }
    }

    .searchBox {
      width: 670rpx;
      margin: 0 auto;
      padding: 0 20rpx;

      .timeBox {
        display: flex;
        height: 78rpx;
        line-height: 78rpx;
        align-items: center;
        margin-bottom: 18rpx;
        font-size: 21rpx;

        .time {
          width: 250rpx;
          height: 78rpx;
          border-radius: 10rpx;
          background: #FFFFFF;
          border: 2rpx solid #FCF7F7;
          padding-left: 26rpx;
          color: #666;

          image {
            width: 35rpx;
            height: 35rpx;
            margin-right: 17rpx;
            vertical-align: middle;
          }
        }
      }

      .pickerBox {
        font-size: 28rpx;
        height: 66rpx;
        line-height: 66rpx;
        display: flex;
        width: 100%;

        .pickerItem {
          display: flex;
          width: 100%;

          .frame {
            position: relative;
            width: 192rpx;
            text-align: center;
            color: #666666;
            border: 2rpx solid #FCF7F7;

            .lower {
              width: 42rpx;
              height: 42rpx;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 10rpx;
            }
          }
        }
      }

      .iptBox {
        display: flex;

        .ipt {
          box-sizing: border-box;
          width: 75%;
          height: 66rpx;
          padding-left: 75rpx;
          border: 2rpx solid #FCF7F7;
          border-radius: 10rpx;
        }

        .iptPla {
          height: 66rpx;
          line-height: 66rpx;
          color: #999;
          font-size: 22rpx;
        }

        .searchBtn {
          display: inline-block;
          background: #A6A6A6;
          width: 25%;
          height: 66rpx;
          line-height: 66rpx;
          text-align: center;
          border-radius: 10rpx;
          margin-left: 20rpx;
          font-size: 24rpx;
        }
      }
    }

    .list {
      width: 90%;
      margin-left: 5%;
      margin-top: 20rpx;
    }

    .list-box {
      position: relative;
      width: 100%;
      // height: 378rpx;
      border-radius: 5px;
      border: 1rpx solid #E5E5E5;
      margin-bottom: 30rpx;
      padding: 20rpx 5%;
      font-size: 24rpx;

      .time {
        border-bottom: 1rpx solid #E5E5E5;
        padding-bottom: 10rpx;
      }

      .list-box-content {
        .item {
          position: relative;
          width: 100%;
          margin-bottom: 20rpx;

          .itemTime {
            position: absolute;
            top: 0;
            left: 10rpx;
          }

          .grey {
            color: #999;
            text-align: center;
            margin: 10rpx 0;
          }

          .btn-box {
            position: absolute;
            top: 0;
            right: 10rpx;
            height: 46rpx;

            view {
              width: 65rpx;
              height: 30rpx;
              border-radius: 8.76rpx;
              font-size: 18rpx;
            }

            .update-btn {
              background: #4E88E6;
              font-weight: 400;
              color: #FFFFFF;
              text-align: center;
              line-height: 30rpx;
              margin-left: 3%;
            }

            .delete-btn {
              background: #D43030;
              font-weight: 400;
              color: #FFFFFF;
              text-align: center;
              line-height: 30rpx;
              margin-left: 3%;
            }
          }

        }
      }

      .btmBox {
        padding-top: 10rpx;
        border-top: 1rpx solid #E5E5E5;
      }
    }







  }
</style>